import { getPersonalInformation } from '../../utils/controller'
import { attr_array } from '../../utils/util'
// const attr_array = ['未知', '内向', '外向', 'E', 'I','直','其他']
Page({

  /**
   * 页面的初始数据
   */
  data: {
    attr_array,
    userInfo:{},
    indicatorDots: false, // 是否显示面板指示点
    autoplay: false, // 自动播放
    interval: 3000, // 自动切换时间间隔
    duration: 400, // 滑动动画时长
    circular: true, //是否循环 是否采用衔接滑动
    indicatorColor: "lightgray", //指示点颜色
    indicatorActiveColor: "red", //当前选中的指示点颜色
    controls: false, // 是否显示播放icon
    bannerMsg:[1,2],
    current:0,
    tempFilePath:'',
    show:true
  },
  async getPersonalInformation() {
    
    const userInfo: any = await getPersonalInformation()
    if (userInfo) {
      this.setData({
        userInfo
      })
    } else {
      wx.showToast({
        icon: 'error',
        title: '获取用户信息失败',
      })
    }

    // this.setData({ info: result })
  },
  save(){
    if(this.data.current == 0){
      // 下载资料1
      this.getPaper(1)
    }else{
      // 下载资料2
      this.getPaper(0)
    }
    
  },
  bindchange(e){
    this.setData({
      current:e.detail.current
    })
    
  },
  // 点击生成海报按钮
  getPaper(index) {
    this.setData({
      tempFilePath: null 
    })
    let bg = "https://admin.slsxh.com/upload/20240622/VGnNR658Pgu85f72906b6344a433b532581150cbf56e.png",
    qrCode = this.data.qrcodeUrl

    wx.showLoading({
      title: '加载中',
      mask: true
    })
    if(index == 0){
      this.wxmlToCanvas(bg, qrCode).then(() => {
        wx.hideLoading()
        this.setData({show:false})
      }).catch((err)=>{
          wx.hideLoading()
      })
    }else{
      this.wxmlToCanvas2(bg, qrCode).then(() => {
        wx.hideLoading()
        this.setData({show:false})
      }).catch((err)=>{
          wx.hideLoading()
      })
    }
    
  },
  // 生成海报1
  wxmlToCanvas(bg, qrCode) {
    let userInfo = this.data.userInfo
    let attr_array = this.data.attr_array
    return new Promise((resolve, reject) => {
      let style = {
        posterWapper:{
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          justifyContent: 'center',
          position: 'relative',
      },
      
      posterImg: {
          width: 350,
          height: 750
      },
    
      headImg: {
          width: 43,
          height: 43,
          borderRadius: 20,
      },
      main:{
        position:'absolute',
        top: 0,
        left: 0,
        width: 350,
        height: 750,
        display: 'flex',
        flexDirection:'column',
        alignItems: 'center',
        
      },
      top:{
        width: 310,
        height: 100,
        backgroundColor:'#fff',
        marginTop:30,
        borderRadius: 10,
        display: 'flex',
        flexDirection:'row',
        alignItems: 'center',
        justifyContent:'space-between',
        paddingLeft:20,
        paddingRight:20,
      },
      topLeft:{
        width: 200,
        height: 40,
      },
      topLeft1:{
        width: 200,
        height: 20,
        display: 'flex',
        flexDirection:'row',
        alignItems: 'center',
      },
      topLeft11:{
        width: 40,
        height: 20,
      },
      topLeft12:{
        width: 18,
        height: 18,
      },
      topLeft2:{
        width: 200,
        height: 20,
        display: 'flex',
        flexDirection:'row',
        alignItems: 'center',
        fontSize:12
      },
      topLeft21:{
        width: 20,
        height: 20,
      },
      topLeft22:{
        width: 10,
        height: 20,
      },
      topLeft23:{
        width: 30,
        height: 20,
      },
      topLeft24:{
        width: 10,
        height: 20,
      },
      topLeft25:{
        width: 40,
        height: 20,
      },
      topLeft26:{
        width: 10,
        height: 20,
      },
      topLeft27:{
        width: 30,
        height: 20,
      },
      topImg:{
        width: 43,
        height: 43,
        borderRadius:20,
      },
      center:{
        width: 310,
        height: 500,
        backgroundColor:'#fff',
        marginTop:10,
        borderRadius: 10,
        
        
      },
      center1:{
        width: 310,
        height: 80,
        backgroundColor:'#2dc24c',
        paddingTop:10,
        paddingBottom:10,
        borderRadius:10,
      },
      center111:{
        width: 270,
        height: 60,
        paddingRight:20,
        paddingLeft:20,
      },
      center12:{
        width: 310,
        height: 10,
        backgroundColor:'#fff'
      },
      center11:{
        width: 270,
        height: 80,
        fontSize:20,
        color:"#fff"
      },
      center2:{
        width: 270,
        height: 80,
        display: 'flex',
        flexDirection:'row',
        alignItems: 'center',
        flexWrap:'wrap',
        paddingRight:20,
        paddingLeft:20,
      },
      center21:{
        width: 60,
        height: 20,
        borderRadius:10,
        // padding:5,
        backgroundColor:'#e2f8e6',
        marginTop:5,
        marginRight:5
      },
      center211:{
        width: 60,
        height: 20,
        textAlign:'center',
        lineHeight:20,
        color:'#58da73',
        fontSize:12,
      },
      center3:{
        marginTop:5,
        width: 270,
        height: 150,
        paddingRight:20,
        paddingLeft:20,
      },
      center31:{
        width: 270,
        height: 30,
        fontSize:20
      },
      center32:{
        width: 270,
        height: 120,
        marginTop:5,
        fontSize:12
      },
      bottom:{
        width: 310,
        height: 80,
        marginTop:10,
        display: 'flex',
        flexDirection:'row',
        alignItems: 'center',
        justifyContent:'space-between',
        backgroundColor:'#fff',
        borderRadius:10,
        paddingLeft:20,
      },
      bottomLeft:{
        width: 200,
        height: 80,
        display: 'flex',
        flexDirection:'column',
        justifyContent:'center'
      },
      bottomLeftT:{
        width: 200,
        height: 30,
        fontSize:20
      },
      bottomLeftT2:{
        width: 170,
        height: 25,
        backgroundColor:'#ffcc00',
        paddingLeft:3
      },
      bottomLeftT2T:{
        width: 170,
        height: 25,
        lineHeight:25,
        
        
      },
      
      bottomImg:{
        width: 43,
        height: 43,
      },
      bottomRight:{
        width: 80,
        height: 80,
        display: 'flex',
        flexDirection:'column',
        alignItems: 'center',
        justifyContent:'center',
      },
    }
    let bg = 'https://admin.slsxh.com/upload/20240624/tQQKLYmAfKykf690dcefee3d19acb558f7bdb33fa208.png'
    let wxml = `<view class="poster-wapper">
    <image class="poster-img" src="${bg}"/>
    <view class="main">
      <view class="top">
        <view class="top-left">
          <view class="top-left1">
            <text class="top-left11">${userInfo.nickname}</text>
            `+ (userInfo.sex==1?`<image class="top-left12" src="https://admin.slsxh.com/upload/20240624/RL26qaUKZuzN789337ca2f3b9bdc4b6b57f9919e6e66.png"/>`:'')+`
            `+ (userInfo.sex==2?`<image class="top-left12" src="https://admin.slsxh.com/upload/20240623/c6cC7Spd8GzGd136f680a58ae6e52c8b1595a0a499f7.png"/>`:'')+`
          </view>
          
          <view class="top-left2">
            <text class="top-left21">${attr_array[userInfo.attr]}</text>
            <text class="top-left22">|</text>
            <text class="top-left23">${userInfo.age1}岁</text>
            <text class="top-left24">|</text>
            <text class="top-left25">${userInfo.height}cm</text>
            <text class="top-left26">|</text>
            <text class="top-left27">${userInfo.weight}kg</text>
          </view>
        </view>
        <image class="top-img" src="${userInfo.head_img}"/>
      </view>
      <view class="center"> 
        <view class="center1">
          <view class="center111">
            <text class="center11">希望半年内快速结婚，家里催婚，希望你真诚</text>
          </view>
          <view class="center12">
            <text class="center121">希望半年内快速结婚，家里催婚，希望你真诚</text>
          </view>
          
        </view>
        <view class="center2">
          <view class="center21">
          `+ (userInfo.degree == 0?` <text class="center211">未知</text>`:'')+`
          `+ (userInfo.degree == 1?` <text class="center211">小学</text>`:'')+`
          `+ (userInfo.degree == 2?` <text class="center211">初中</text>`:'')+`
          `+ (userInfo.degree == 3?` <text class="center211">高中</text>`:'')+`
          `+ (userInfo.degree == 4?` <text class="center211">大专</text>`:'')+`
          `+ (userInfo.degree == 5?` <text class="center211">本科</text>`:'')+`
          `+ (userInfo.degree == 6?` <text class="center211">研究生</text>`:'')+`
          `+ (userInfo.degree == 7?` <text class="center211">博士</text>`:'')+`
          `+ (userInfo.degree == 8?` <text class="center211">博士后</text>`:'')+`
          </view>
          <view class="center21">
          `+ (userInfo.is_marry == 0?` <text class="center211">未知</text>`:'')+`
          `+ (userInfo.is_marry == 1?` <text class="center211">已婚</text>`:'')+`
          `+ (userInfo.is_marry == 2?` <text class="center211">未婚</text>`:'')+`
          `+ (userInfo.is_marry == 3?` <text class="center211">离异</text>`:'')+`
          </view>
          `+ (userInfo.work ?` <view class="center21"><text class="center211">${userInfo.work}</text> </view>`:'')+`

          <view class="center21">
          `+ (userInfo.annual_income == 0?` <text class="center211">未知</text>`:'')+`
          `+ (userInfo.annual_income == 1?` <text class="center211">1-10万</text>`:'')+`
          `+ (userInfo.annual_income == 2?` <text class="center211">10-20万</text>`:'')+`
          `+ (userInfo.annual_income == 3?` <text class="center211">20-30万</text>`:'')+`
          `+ (userInfo.annual_income == 4?` <text class="center211">30-50万</text>`:'')+`
          `+ (userInfo.annual_income == 5?` <text class="center211">50-100万</text>`:'')+`
          `+ (userInfo.annual_income == 6?` <text class="center211">100以上</text>`:'')+`
          </view>
          <view class="center21">
          `+ (userInfo.is_house == 0?` <text class="center211">未知</text>`:'')+`
          `+ (userInfo.is_house == 1?` <text class="center211">暂无</text>`:'')+`
          `+ (userInfo.is_house == 2?` <text class="center211">有</text>`:'')+`
          </view>
        </view>
        <view class="center3">
          <text class="center31">自我介绍</text>
          <text class="center32">${userInfo.self_info}</text>
        </view>
        <view class="center3">
          <text class="center31">互助期望</text>
          <text class="center32">${userInfo.marry_expect}</text>
        </view>
      </view>
      <view class="bottom"> 
        <view class="bottom-left"> 
          <text class="bottom-left-t">手拉手.快速牵手TA</text>
          <view class="bottom-left-t2">
            <text class="bottom-left-t2-t">快速使用微信扫码联系吧！</text>
          </view>
        </view>
        <view class="bottom-right"> 
          <image class="bottom-img" src="${bg}"/>
        </view>
      </view>
            
    </view>
    
    
</view>
`

      this.renderToCanvas({ wxml, style}).then(res => {
        resolve(res)
      })
    })
  },
  // 生成海报2
  wxmlToCanvas2(bg, qrCode) {
    let userInfo = this.data.userInfo
    let attr_array = this.data.attr_array
    return new Promise((resolve, reject) => {
      let style = {
        posterWapper:{
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          justifyContent: 'center',
          position: 'relative',
      },
      
      posterImg: {
          width: 350,
          height: 750
      },
    
      headImg: {
          width: 43,
          height: 43,
          borderRadius: 20,
      },
      main:{
        position:'absolute',
        top: 0,
        left: 0,
        width: 350,
        height: 750,
        display: 'flex',
        flexDirection:'column',
        alignItems: 'center',
        
      },
      top:{
        width: 310,
        height: 100,
        backgroundColor:'#fff',
        marginTop:30,
        borderRadius: 10,
        display: 'flex',
        flexDirection:'row',
        alignItems: 'center',
        justifyContent:'space-between',
        paddingLeft:20,
        paddingRight:20,
      },
      topLeft:{
        width: 200,
        height: 40,
      },
      topLeft1:{
        width: 200,
        height: 20,
        display: 'flex',
        flexDirection:'row',
        alignItems: 'center',
      },
      topLeft11:{
        width: 40,
        height: 20,
      },
      topLeft12:{
        width: 18,
        height: 18,
      },
      topLeft2:{
        width: 200,
        height: 20,
        display: 'flex',
        flexDirection:'row',
        alignItems: 'center',
        fontSize:12
      },
      topLeft21:{
        width: 20,
        height: 20,
      },
      topLeft22:{
        width: 10,
        height: 20,
      },
      topLeft23:{
        width: 30,
        height: 20,
      },
      topLeft24:{
        width: 10,
        height: 20,
      },
      topLeft25:{
        width: 40,
        height: 20,
      },
      topLeft26:{
        width: 10,
        height: 20,
      },
      topLeft27:{
        width: 30,
        height: 20,
      },
      topImg:{
        width: 43,
        height: 43,
        borderRadius:20,
      },
      center:{
        width: 310,
        height: 500,
        backgroundColor:'#fff',
        marginTop:10,
        borderRadius: 10,
        padding:20,
      },
      center1:{
        width: 270,
        height: 80,
      },
      center11:{
        width: 270,
        height: 80,
        fontSize:20
      },
      center2:{
        width: 270,
        height: 80,
        display: 'flex',
        flexDirection:'row',
        alignItems: 'center',
        flexWrap:'wrap'
      },
      center21:{
        width: 60,
        height: 20,
        borderRadius:10,
        // padding:5,
        backgroundColor:'#e2f8e6',
        marginTop:5,
        marginRight:5
      },
      center211:{
        width: 60,
        height: 20,
        textAlign:'center',
        lineHeight:20,
        color:'#58da73',
        fontSize:12,
      },
      center3:{
        marginTop:5,
        width: 270,
        height: 150,
      },
      center31:{
        width: 270,
        height: 30,
        fontSize:20
      },
      center32:{
        width: 270,
        height: 120,
        marginTop:5,
        fontSize:12
      },
      bottom:{
        width: 310,
        height: 80,
        marginTop:10,
        display: 'flex',
        flexDirection:'row',
        alignItems: 'center',
        justifyContent:'space-between',
      },
      bottomLeft:{
        width: 200,
        height: 80,
        display: 'flex',
        flexDirection:'column',
        justifyContent:'center'
      },
      bottomLeftT:{
        width: 200,
        height: 30,
        fontSize:20
      },
      bottomLeftT2:{
        width: 170,
        height: 25,
        backgroundColor:'#ffcc00',
        paddingLeft:3
      },
      bottomLeftT2T:{
        width: 170,
        height: 25,
        lineHeight:25,
        
        
      },
      
      bottomImg:{
        width: 43,
        height: 43,
      },
      bottomRight:{
        width: 80,
        height: 80,
        display: 'flex',
        flexDirection:'column',
        alignItems: 'center',
        justifyContent:'center',
      },
    }
    let bg = 'https://admin.slsxh.com/upload/20240624/tQQKLYmAfKykf690dcefee3d19acb558f7bdb33fa208.png'
    let wxml = `<view class="poster-wapper">
    <image class="poster-img" src="${bg}"/>
    <view class="main">
      <view class="top">
        <view class="top-left">
          <view class="top-left1">
            <text class="top-left11">${userInfo.nickname}</text>
            `+ (userInfo.sex==1?`<image class="top-left12" src="https://admin.slsxh.com/upload/20240624/RL26qaUKZuzN789337ca2f3b9bdc4b6b57f9919e6e66.png"/>`:'')+`
            `+ (userInfo.sex==2?`<image class="top-left12" src="https://admin.slsxh.com/upload/20240623/c6cC7Spd8GzGd136f680a58ae6e52c8b1595a0a499f7.png"/>`:'')+`
          </view>
          
          <view class="top-left2">
            <text class="top-left21">${attr_array[userInfo.attr]}</text>
            <text class="top-left22">|</text>
            <text class="top-left23">${userInfo.age1}岁</text>
            <text class="top-left24">|</text>
            <text class="top-left25">${userInfo.height}cm</text>
            <text class="top-left26">|</text>
            <text class="top-left27">${userInfo.weight}kg</text>
          </view>
        </view>
        <image class="top-img" src="${userInfo.head_img}"/>
      </view>
      <view class="center"> 
        <view class="center1">
          <text class="center11">希望半年内快速结婚，家里催婚，希望你真诚</text>
        </view>
        <view class="center2">
          <view class="center21">
          `+ (userInfo.degree == 0?` <text class="center211">未知</text>`:'')+`
          `+ (userInfo.degree == 1?` <text class="center211">小学</text>`:'')+`
          `+ (userInfo.degree == 2?` <text class="center211">初中</text>`:'')+`
          `+ (userInfo.degree == 3?` <text class="center211">高中</text>`:'')+`
          `+ (userInfo.degree == 4?` <text class="center211">大专</text>`:'')+`
          `+ (userInfo.degree == 5?` <text class="center211">本科</text>`:'')+`
          `+ (userInfo.degree == 6?` <text class="center211">研究生</text>`:'')+`
          `+ (userInfo.degree == 7?` <text class="center211">博士</text>`:'')+`
          `+ (userInfo.degree == 8?` <text class="center211">博士后</text>`:'')+`
          </view>
          <view class="center21">
          `+ (userInfo.is_marry == 0?` <text class="center211">未知</text>`:'')+`
          `+ (userInfo.is_marry == 1?` <text class="center211">已婚</text>`:'')+`
          `+ (userInfo.is_marry == 2?` <text class="center211">未婚</text>`:'')+`
          `+ (userInfo.is_marry == 3?` <text class="center211">离异</text>`:'')+`
          </view>
          `+ (userInfo.work ?` <view class="center21"><text class="center211">${userInfo.work}</text> </view>`:'')+`

          <view class="center21">
          `+ (userInfo.annual_income == 0?` <text class="center211">未知</text>`:'')+`
          `+ (userInfo.annual_income == 1?` <text class="center211">1-10万</text>`:'')+`
          `+ (userInfo.annual_income == 2?` <text class="center211">10-20万</text>`:'')+`
          `+ (userInfo.annual_income == 3?` <text class="center211">20-30万</text>`:'')+`
          `+ (userInfo.annual_income == 4?` <text class="center211">30-50万</text>`:'')+`
          `+ (userInfo.annual_income == 5?` <text class="center211">50-100万</text>`:'')+`
          `+ (userInfo.annual_income == 6?` <text class="center211">100以上</text>`:'')+`
          </view>
          <view class="center21">
          `+ (userInfo.is_house == 0?` <text class="center211">未知</text>`:'')+`
          `+ (userInfo.is_house == 1?` <text class="center211">暂无</text>`:'')+`
          `+ (userInfo.is_house == 2?` <text class="center211">有</text>`:'')+`
          </view>
        </view>
        <view class="center3">
          <text class="center31">自我介绍</text>
          <text class="center32">${userInfo.self_info}</text>
        </view>
        <view class="center3">
          <text class="center31">互助期望</text>
          <text class="center32">${userInfo.marry_expect}</text>
        </view>
      </view>
      <view class="bottom"> 
        <view class="bottom-left"> 
          <text class="bottom-left-t">手拉手.快速牵手TA</text>
          <view class="bottom-left-t2">
            <text class="bottom-left-t2-t">快速使用微信扫码联系吧！</text>
          </view>
        </view>
        <view class="bottom-right"> 
          <image class="bottom-img" src="${bg}"/>
        </view>
      </view>
            
    </view>
    
    
</view>
`

      this.renderToCanvas({ wxml, style}).then(res => {
        resolve(res)
      })
    })
  },
  //渲染成海报
  renderToCanvas({ wxml, style }) {
    return new Promise((resolve, reject) => {
      
      const p1 = this.widget.renderToCanvas({ wxml, style })
      p1.then((res) => {
        this.container = res
        return this.extraImage(this)
      }).then((res) => {
        resolve(res)
      })
    })
  },
  // 生成临时图片地址
  extraImage() {
    return new Promise((resolve, reject) => {
      const p2 = this.widget.canvasToTempFilePath()
      p2.then((res) => {
        this.setData({
          tempFilePath: res.tempFilePath
        })
        wx.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,
          success(res) {
            wx.showModal({
              title: '提示',
              content: '已保存到相册，请在手机相册中查看。',
              showCancel: false
            });
          },
          fail(res) {
            wx.showToast({
              title: '保存失败',
              icon: 'none'
            });
          }
        });
        resolve(res.tempFilePath)
      })
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad() {
    this.getPersonalInformation()
    this.widget = this.selectComponent('.widget')
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})